<template>
    <div class="container">
      <div class="header">
        <div class="pic">
          <img src="@/assets/img/bakg.png">
        </div>
        <div class="info">
          <div class="avatar">
            <img src="@/assets/img/dian.png" alt="">
          </div>
          <div class="right">
            <div class="title">得胜桥豆花米线(金江店)</div>
            <div class="text">
              <div class="pic">
                <img src="@/assets/img/fork.png" alt="">
              </div>
              <span>本店共有360种餐品供您品尝</span>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <ul @click="clickItem" ref="menu">
            <template v-for="(item, index) in foodClass">
              <li class="item"  :data-id="index" > {{ item.name }}  </li>
            </template>
          </ul>
          <div class="line" ref="line"></div>
        </div>
        <div class="right" ref="right" @scroll="rightScroll">
          <div class="pane" v-for="(pItem, pIndex) in foodClass" :ref="setPanRef">
            <div class="title">{{ pItem.name }}</div>
            <div class="list">
              <goodsItem v-for="(item, index) in pItem.foods" :key="item.id" :item="item"></goodsItem>
            </div>
          </div>
        </div>
      </div>
      <cart :open="open" @checked="checkCart"></cart>
    </div>
  </template>
  
  <script setup>
  import goodsItem from '@/components/goods-item.vue';
  import cart from '@/components/cart.vue';
  import { nextTick, onMounted, ref } from 'vue'
  import axios from 'axios';
  
  let open = ref(false)
  
  const right = ref(null)
  const line = ref(null)
  const menu = ref(null)
  const foodClass = ref(null)
  let itemArr=[]

  onMounted(async()=>{
    let res = await axios.get('http://localhost:8080/foodClass')
    foodClass.value = res.data
    nextTick(()=>{
      itemArr = [...menu.value.children]
      activeItem(0)
    })
    // activeItem(0)
  })
  
  const paneArr = ref([])
  
  const checkCart = (e)=>{
    open.value = e
  }
  
  const setPanRef = (el, index) => {
    paneArr.value.push(el)
  }
  
  const removeActive = () => {
    itemArr.forEach(element => {
      element.classList.remove('active')
      element.classList.remove('radius-br')
      element.classList.remove('radius-tr')
    });
  }
  
  const activeItem = (i) => {
    if (i == 0) {
      itemArr[i + 1].classList.add('radius-tr')
    } else if (i == itemArr.length - 1) {
      itemArr[i - 1].classList.add('radius-br')
    } else {
      itemArr[i - 1].classList.add('radius-br')
      itemArr[i + 1].classList.add('radius-tr')
    }
    // e.target.classList.add('active')
    itemArr[i].classList.add('active')
    //移动line
    line.value.style.transform = `translateY(${itemArr[i].offsetTop}px)`
  }
  
  const clickItem = (e) => {
    // console.log(e)
    if (e.target.tagName === 'LI') {
      removeActive()
      const i = +e.target.dataset.id
      activeItem(i)
      //将对应序号的offsetTop赋给right.scrollTop
      right.value.scrollTop = paneArr.value[i].offsetTop
  
    }
  }
  
  const findPaneIndex = (scrollTop) => {
    for (let i = 0; i < paneArr.value.length; i++) {
      if (paneArr.value[i].offsetTop > scrollTop)
        return i
    }
    return i
  }
  
  const rightScroll = (e) => {
    // console.log(e.target.scrollTop)
    // const index = findPaneIndex(e.target.scrollTop)
    //把序号为index-1的item激活
    removeActive()
    const i = findPaneIndex(e.target.scrollTop) - 1
    activeItem(i)
  }
  </script>
  
  <style lang="scss" scoped>
  .container {
    .header {
      .pic {
        width: 100%;
        height: 128px;
  
        img {
          width: 100%;
          height: 100%;
        }
      }
  
      .info {
        border-radius: 6px;
        transform: translateY(-50%);
        box-sizing: border-box;
        background: #fff;
        display: flex;
        width: 355px;
        margin: 0 auto;
        padding: 15px;
  
        .avatar {
          width: 50px;
          height: 50px;
  
          img {
            width: 100%;
            height: 100%;
          }
        }
  
        .title {
          font-size: 18px;
          color: #333;
        }
  
        .text {
          display: flex;
  
          .pic {
            width: 16px;
            height: 16px;
            margin-right: 5px;
  
            img {
              width: 100%;
              height: 100%;
            }
          }
  
          span {
            font-size: 14px;
            color: #666;
          }
        }
  
        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 10px;
        }
  
      }
    }
  
    .content {
      transform: translateY(-30px);
      display: flex;
  
      .left {
        position: relative;
  
        .line {
          position: absolute;
          top: 18px;
          left: 0;
          width: 4px;
          height: 24px;
          background: #2493f1;
          transition: all .3s;
        }
  
        .item {
          line-height: 60px;
          width: 80px;
          height: 60px;
          text-align: center;
          color: #666;
          font-size: 13px;
          background: #F5F5F5;
          transition: all .3s;
  
          &.active {
            background: #fff;
            color: #2493F1;
          }
  
          &.radius-tr {
            border-radius: 0 12px 0 0;
          }
  
          &.radius-br {
            border-radius: 0 0 12px 0;
          }
        }
      }
  
      .right {
        padding-bottom: 54px;
        position: relative;
        height: calc(100vh - 168px);
        overflow: scroll;
        scroll-behavior: smooth;
        flex: 1;
  
        .pane {
          .title {
            font-size: 14px;
            color: #333;
            padding: 13px 10px;
          }
  
        }
      }
    }
  
  
  }
  </style>
  